<template>
  <div class="tip">
    <img :src="tipData.src" class="icon">
    <span class="name">{{ tipData.name }}</span>
    <span class="value">{{ tipData.value }}</span>
  </div>
</template>
<script setup>
import { defineProps } from 'vue';
const props = defineProps({
  tipData: {
    type: Object,
    default: () => {
      return {
        src: '',
        name: '',
        value: ''
      };
    }
  }
});
</script>
<style lang="less" scoped>
.tip {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.icon {
  width: 1.5rem;
  height: 1.5rem;
}
.name {
  font-size: 1.125rem;
  color: rgb(144, 199, 241);
  margin-top: 0.25rem;
}
.value {
  font-size: 1.875rem;
  color: white;
  margin-top: 0.5rem;
}
</style>
